<div class="docs-section">
    <h1 id="list" class="page-header">列表 LIST</h1>

    <h2 id="list-base">基本说明</h2>
    <p>
        列表控件主要用于以列表形式展示数据。
    </p>
    <div class="docs-example">
        <div id="testList"></div>
    </div>
    <div class="docs-code">
        <pre>
            <code class="html">&lt;div id="testList"&gt;&lt;/div&gt;</code>
        </pre>
    </div>
    <div class="docs-code">
        <pre>
            <code class="js">//list
var testList = new Dolphin.LIST({
    panel : "#testList",
    data : {total : 3, rows : [{
        firstName : 'Mark',
        lastName : 'Otto',
        username : 'mdo'
    },{
        firstName : 'Jacob',
        lastName : 'Thornton',
        username : 'fat'
    },{
        firstName : 'Larry',
        lastName : 'Bird',
        username : 'twitter'
    }]},
    columns : [{
        code : 'firstName',
        title : 'First Name'
    },{
        code : 'lastName',
        title : 'Last Name'
    },{
        code : 'username',
        title : 'Username'
    }]
});</code>
        </pre>
    </div>

    <h2 id="list-parameters">列表参数</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>名称</th>
                <th style="width:120px;">类型</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <!--关键参数-->
            <tr>
                <td>panel</td><td>String | <br/>jQuery selector</td><td>无</td>
                <td>String遵循jQuery选择器规则，也可直接为jQuery selector。列表生成区域，可通过$(panel).data('dolphin')获取列表对象</td>
            </tr>
            <tr>
                <td>columns</td><td>Array</td><td>无</td><td>详见<a href="#list-columns-parameters">列参数</a></td>
            </tr>
            <tr>
                <td>data</td><td>json</td><td>无</td>
                <td>json格式为{total:0, rows:[]}，配置data参数，直接根据data加载列表数据及分页条</td>
            </tr>
            <tr>
                <td>url</td><td>String</td><td>无</td><td>请求后台数据时的url</td>
            </tr>
            <tr>
                <td>queryParams</td><td>json</td><td>无</td><td>请求后台数据时的参数</td>
            </tr>
            <tr>
                <td>ajaxType</td><td>String</td><td>get</td><td>ajax提交方式</td>
            </tr>

            <!--数据相关参数-->
            <tr>
                <td>idField</td><td>String</td><td>id</td><td>数据主键字段</td>
            </tr>
            <tr>
                <td>nameField</td><td>String |<br/>Function</td><td>无</td><td>数据名称字段，为方法时，参数为行数据，返回名称结果</td>
            </tr>
            <tr>
                <td>sortName</td><td>String</td><td>无</td><td>数据排序字段，请求后台数据时作为查询条件sortName</td>
            </tr>
            <tr>
                <td>sortOrder</td><td>String</td><td>无</td><td>数据排序方式，请求后台数据时作为查询条件sortOrder</td>
            </tr>
            <tr>
                <td>sortFlag</td><td>Boolean</td><td>false</td><td>列表表头是否默认显示排序图标</td>
            </tr>

            <!--分页相关参数-->
            <tr>
                <td>pagination</td><td>Boolean</td><td>true</td><td>是否带分页，分页请求参数pageSize, pageNumber</td>
            </tr>
            <tr>
                <td>pageSize</td><td>number</td><td>10</td><td>每页条数</td>
            </tr>
            <tr>
                <td>pageNumber</td><td>number</td><td>1</td><td>当前页数，第一页为0</td>
            </tr>
            <tr>
                <td>paginationClass</td><td>String</td><td>null</td><td>分页条自定义class</td>
            </tr>
            <tr>
                <td>pageSizeOption</td><td>Array&lt;number&gt;</td><td>[5, 10, 20, 50]</td><td>每页显示条数选项</td>
            </tr>
            <tr>
                <td>paginationSimpleFlag</td><td>Boolean</td><td>false</td><td>简化分页条</td>
            </tr>

            <!--样式相关参数-->
            <tr>
                <td>hideHeader</td><td>Boolean</td><td>false</td><td>是否隐藏表头</td>
            </tr>
            <tr>
                <td>striped</td><td>Boolean</td><td>true</td><td>是否隔行变色</td>
            </tr>
            <tr>
                <td>bordered</td><td>Boolean</td><td>true</td><td>是否有边框</td>
            </tr>
            <tr>
                <td>hover</td><td>Boolean</td><td>true</td><td>是否鼠标移上时变色</td>
            </tr>
            <tr>
                <td>rowIndex</td><td>Boolean</td><td>true</td><td>是否显示行号</td>
            </tr>
            <tr>
                <td>checkbox</td><td>Boolean</td><td>true</td><td>是否有选择框</td>
            </tr>
            <tr>
                <td>multiple</td><td>Boolean</td><td>true</td><td>是否多选，多选不支持翻页多选</td>
            </tr>
            <tr>
                <td>clickForCheck</td><td>Boolean</td><td>true</td><td>单击行时是否切换选择状态</td>
            </tr>
            <tr>
                <td>width</td><td>String</td><td>100%</td><td>css样式</td>
            </tr>
            <tr>
                <td>height</td><td>String</td><td>auto</td><td>css样式</td>
            </tr>

            <tr>
                <td>title</td><td>String</td><td>null</td><td>当配置时，以面板方式显示列表标题</td>
            </tr>
            <tr>
                <td>panelType</td><td>String</td><td>panel-primary</td>
                <td>面板主题，可选：panel-primary | panel-success | panel-info | panel-warning | panel-danger</td>
            </tr>
            <tr>
                <td>titleIcon</td><td>String</td><td>glyphicon-list</td><td>表头图标，使用Bootstrap Glyphicons 字体图标</td>
            </tr>

            <tr>
                <td>orderIcon</td><td>json</td><td>
                    <pre class="not-code">{
no : 'glyphicon-sort',
asc : 'glyphicon-sort-by-attributes',
desc : 'glyphicon-sort-by-attributes-alt'
}</pre></td><td>排序图标，使用Bootstrap Glyphicons 字体图标</td>
            </tr>
            <tr>
                <td>loadingFlag</td><td>Boolean</td><td>true</td><td>是否显示加载状态</td>
            </tr>
        </tbody>
    </table>

    <h2 id="list-columns-parameters">列参数</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>名称</th>
                <th style="width:120px;">类型</th>
                <th>默认</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <!--关键参数-->
            <tr>
                <td>code</td><td>String</td><td>无</td><td>必填，字段key</td>
            </tr>
            <tr>
                <td>title</td><td>String</td><td>无</td><td>必填，字段标题</td>
            </tr>
            <tr>
                <td>width</td><td>String</td><td>auto</td><td>css样式</td>
            </tr>
            <tr>
                <td>formatter</td><td>Function</td><td>无</td>
                <td>
                    自定义格式，function(val, row, index)<br/>
                    <strong>this</strong>: 当前td，jQuery selector<br/>
                    <strong>val</strong>: 此字段的数据<br/>
                    <strong>row</strong>: 此行的数据<br/>
                    <strong>index</strong>: 此行的行号，第一行为1
                </td>
            </tr>
            <tr>
                <td>orderFlag</td><td>Boolean</td><td>false</td><td>是否显示列排序图标</td>
            </tr>
            <!--<tr>-->
                <!--<td>groupFlag</td><td>Boolean</td><td>false</td><td>是否显示分组图标</td>-->
            <!--</tr>-->
            <tr>
                <td>children</td><td>Array&lt;columns&gt;</td><td>null</td><td>子表头</td>
            </tr>
        </tbody>
    </table>

    <h2 id="list-event">事件</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
        <tr>
            <th>事件</th>
            <th style="width:100px;">参数</th>
            <th>描述</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>onClick</td>
                <td>data<br/>row<br/>event</td>
                <td>
                    当点击某一行的时候触发，参数说明：<br/>
                    data：行数据<br/>
                    row：tr 元素，jQuery selector<br/>
                    event：event事件对象。
                </td>
            </tr>
            <tr>
                <td>onCheck</td>
                <td>data<br/>row<br/>event</td>
                <td>
                    当切换某一行的选中状态时候触发，参数说明：<br/>
                    data：行数据<br/>
                    row：tr 元素，jQuery selector<br/>
                    event：event事件对象。
                </td>
            </tr>
            <tr>
                <td>onChecked</td>
                <td>data<br/>row<br/>event</td>
                <td>
                    当选中某一行的时候触发，参数说明：<br/>
                    data：行数据<br/>
                    row：tr 元素，jQuery selector<br/>
                    event：event事件对象。
                </td>
            </tr>
            <tr>
                <td>onUnchecked</td>
                <td>data<br/>row<br/>event</td>
                <td>
                    当取消选中某一行的时候触发，参数说明：<br/>
                    data：行数据<br/>
                    row：tr 元素，jQuery selector<br/>
                    event：event事件对象。
                </td>
            </tr>
            <tr>
                <td>onLoad</td>
                <td>data</td>
                <td>
                    当列表加载完成后触发，参数说明：<br/>
                    data：列表数据
                </td>
            </tr>
            <tr>
                <td>dataFilter</td>
                <td>data</td>
                <td>
                    获取数据成功，渲染列表前触发，用于处理数据及格式等，方法返回处理后的数据，参数说明：<br/>
                    data：列表数据
                </td>
            </tr>
        </tbody>
    </table>

    <h2 id="list-function">方法</h2>
    <table class="table table-bordered table-striped docs-param">
        <thead>
            <tr>
                <th>方法</th>
                <th style="width:100px;">参数</th>
                <th>返回值</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>empty</td>
                <td>无</td>
                <td>无</td>
                <td>
                    清空列表
                </td>
            </tr>
            <tr>
                <td>loadData</td>
                <td>data</td>
                <td>无</td>
                <td>
                    根据新的数据重新渲染列表，参数说明：<br/>
                    data：新列表数据(json)
                </td>
            </tr>
            <tr>
                <td>load</td>
                <td>url<br/>queryParams</td>
                <td>无</td>
                <td>
                    根据新的url请求后台数据渲染列表，参数说明：<br/>
                    url：请求路径(String)，为空时根据原url请求<br/>
                    queryParams：请求参数(json)
                </td>
            </tr>
            <tr>
                <td>reload</td>
                <td>url<br/>queryParams</td>
                <td>无</td>
                <td>
                    根据新的url请求后台数据渲染列表并回到第一页，参数说明：<br/>
                    url：请求路径(String)，为空时根据原url请求<br/>
                    queryParams：请求参数(json)
                </td>
            </tr>
            <tr>
                <td>query</td>
                <td>queryParams</td>
                <td>无</td>
                <td>
                    根据新的查询条件请求后台数据渲染列表，参数说明：<br/>
                    queryParams：查询条件(json)，为空时根据原条件请求
                </td>
            </tr>
            <tr>
                <td>sort</td>
                <td>sortName<br/>sortOrder<br/>queryParams</td>
                <td>无</td>
                <td>
                    根据新的排序条件请求后台数据渲染列表，参数说明：<br/>
                    sortName：排序字段(String)<br/>
                    sortOrder：排序方式(String)，<br/>
                    queryParams：请求参数(json)，为空时根据原条件请求
                </td>
            </tr>
            <tr>
                <td>goPage</td>
                <td>pageNo</td>
                <td>无</td>
                <td>
                    跳转到指定页数，参数说明：<br/>
                    pageNo：页数(number)
                </td>
            </tr>
            <tr>
                <td>addRowWithData</td>
                <td>data<br/>rowIndex</td>
                <td>无</td>
                <td>
                    添加一行，参数说明：<br/>
                    data：新的一行的数据(json)<br/>
                    rowIndex：新的一行的行号(number)
                </td>
            </tr>
            <tr>
                <td>removeRow</td>
                <td>id</td>
                <td>无</td>
                <td>
                    删除指定行，用此方法，列表参数必须配上idField，参数说明：<br/>
                    id：行数据主键(string)
                </td>
            </tr>
            <tr>
                <td>removeRowsById</td>
                <td>ids</td>
                <td>无</td>
                <td>
                    删除指定多行，用此方法，列表参数必须配上idField，参数说明：<br/>
                    ids：行数据主键数组(Array&lt;string&gt;)
                </td>
            </tr>
            <tr>
                <td>getRows</td>
                <td>无</td>
                <td>行数据(Array&lt;json&gt;)</td>
                <td>
                    获取列表所有行的数据
                </td>
            </tr>
            <tr>
                <td>check</td>
                <td>id<br/>flag</td>
                <td>无</td>
                <td>
                    切换指定行的选中状态，用此方法，列表参数必须配上idField，参数说明：<br/>
                    id：数据主键(String | Array&lt;String&gt;)<br/>
                    flag：可选，默认为true(true：选中，false：取消选中，null：切换选中状态)
                </td>
            </tr>
            <tr>
                <td>checkAll</td>
                <td>flag</td>
                <td>无</td>
                <td>
                    全选，参数说明：<br/>
                    flag：可选，默认为true(true：选中，false：取消选中，null：切换选中状态)
                </td>
            </tr>
            <tr>
                <td>getChecked</td>
                <td>无</td>
                <td>行数据(Array&lt;json&gt;)</td>
                <td>
                    获取列表选中行的数据
                </td>
            </tr>
            <tr>
                <td>getName</td>
                <td>data</td>
                <td>行数据名称</td>
                <td>
                    根据行数据获取行名称，用此方法，列表参数必须配上nameField，参数说明：<br/>
                    data：行数据(json)
                </td>
            </tr>
        </tbody>
    </table>
</div>